<template>
  <el-table :data="detail" border style="width: 100%">
    <el-table-column label="开庭日期" prop="hearingDate" show-overflow-tooltip />
    <el-table-column label="案号" prop="caseNo" show-overflow-tooltip />
    <el-table-column label="案由" prop="caseReason" show-overflow-tooltip />
    <el-table-column label="法院" prop="court" show-overflow-tooltip />
    <el-table-column label="公告内容" prop="content" show-overflow-tooltip />
    <el-table-column label="审判长/主审人" prop="judge" show-overflow-tooltip />
    <el-table-column label="开庭日期" prop="hearingDate" show-overflow-tooltip />
    <el-table-column label="地区" prop="region" show-overflow-tooltip />
    <el-table-column label="案件身份" prop="pureRole" show-overflow-tooltip />
    <el-table-column label="当事人" prop="relatedCompanies" width="300" show-overflow-tooltip>
      <template #default="{ row }">
        <div v-for="(item, i) in JSON.parse(row.relatedCompanies)" :key="'relatedCompanies' + i">
          <div class="mb-20px"> {{ item.role }} : {{ filterArr(item.nameArr) }} </div>
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script setup lang="ts">
const props = defineProps({
  detail: Array
})
const filterArr = (val) => {
  if (typeof val === 'object' && Array.isArray(val)) {
    return val.join(',')
  }
  return val
}
</script>

<style lang="scss" scoped>
.mb-20px {
  margin-bottom: 20px;
}
</style>
